import React from 'react'
import './index.css';
export default class Item extends React.Component {
    state = {
        isShow: false
    }
    changeShowStatus = (isShow) => {
        this.setState({ isShow })
    }
    changeCheck = (id) => {
        this.props.checkStatus(id, this.checkInput.checked);
    }
    render () {
        const { id, name, isCheck, delectItem } = this.props
        const { isShow } = this.state
        return (
            <li onMouseEnter={() => { this.changeShowStatus(true) }} onMouseLeave={() => { this.changeShowStatus(false) }} >
                <input type="checkbox" ref={(e) => this.checkInput = e} className="check-box" checked={isCheck} onChange={() => { this.changeCheck(id) }} />
                <span>{name}</span>
                <button className="delect-btn" style={{ display: isShow ? 'block' : 'none' }} onClick={() => { return delectItem(id) }}>删除</button>
            </li>
        )
    }
}